<script lang="ts" setup>
const userStore = useUserStore()

const counter = useCookie('counter', { default: () => 0 })

userStore.loadUser()

// refreshCookie('counter')
</script>

<template>
  <div>
    name: {{ userStore.name }} userId: {{ userStore.userId }}
    <UButton
      @click="
        () => {
          userStore.userId += 1
        }
      "
    >
      修改
    </UButton>
    <div>每当我们更新 counter 变量时，cookie 将相应更新</div>
    <UButton
      @click="
        () => {
          counter += 1
        }
      "
    >
      修改cookie的counter
    </UButton>
    <div
      @click="
        () => {
          userStore.$reset()
        }
      "
    >
      reset
    </div>
    <div
      @click="
        () => {
          userStore.name = 'test'
        }
      "
    >
      change
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
